<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例6</title>
    <link rel="stylesheet" href="../css/index.css">
    <style>
        .content {
            width: 400px;
            height: 520px;
        }
        
        .header {
            background-color: black;
            color: #fff;
            padding: 5px 10px;
        }
        
        .inputT {
            height: 62px;
            background: url(./img/inputBg.jpg);
            padding: 10px 15px;
        }
        
        .inputT div {
            width: 100%;
        }
        
        .borad {
            height: 100%;
            background: url(./img/bg.jpg);
            color: #fff;
            padding: 10px;
        }
        
        .borad>div {
            display: flex;
            justify-content: space-evenly;
            width: 100%;
            padding: 20px 0;
        }
        
        .symbol {
            width: 65px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: url(./img/btn.png) 0 -42px;
        }
        
        .clear {
            width: 65px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: url(./img/btn.png) 0 -42px;
        }
        
        .symbol:hover {
            background: url(./img/btn.png) -65px -42px;
        }
        
        .clear:hover {
            background: url(./img/btn.png) -65px -42px;
        }
        
        .numbers {
            width: 65px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: url(./img/btn.png) 0 0px;
        }
        
        .numbers:hover {
            background: url(./img/btn.png) -65px 0px;
        }
        
        .zero {
            width: 169px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: url(./img/btn.png) 0 -72px/168px 236px;
        }
        
        .zero:hover {
            background: url(./img/btn.png) 0 -106px/170px 233px
        }
        
        .result {
            background: url(./img/btn.png) 0 -166px;
            height: 96px;
            line-height: 96px;
            text-align: center;
        }
        
        .result:hover {
            background: url(./img/btn.png) -64px -166px;
        }
    </style>
</head>

<body>
    <div class="content flex col">
        <div class="header flex row-r">
            <div>网页简易计算器</div>
        </div>
        <div class="inputT flex col a-c">
            <div class="flex row-r" id="allin" style="height: 15px;font-size: 15px;"></div>
            <div class="flex row-r" id="nowin" style="height: 40px;font-size: 40px;"></div>
        </div>
        <div class="borad">
            <div>
                <div class="flex" style="justify-content: space-evenly;flex:5">
                    <div class="clear">C</div>
                    <div class="symbol">%</div>
                    <div class="symbol">/</div>
                </div>
                <div class="symbol" style="flex: 1;">x</div>
            </div>

            <div>
                <div class="flex" style="justify-content: space-evenly;flex:5">
                    <div class="numbers">7</div>
                    <div class="numbers">8</div>
                    <div class="numbers">9</div>
                </div>

                <div class="symbol" style="flex: 1;">-</div>
            </div>

            <div>
                <div class="flex" style="justify-content: space-evenly;flex:5">
                    <div class="numbers">4</div>
                    <div class="numbers">5</div>
                    <div class="numbers">6</div>
                </div>
                <div class="symbol" style="flex: 1;">+</div>
            </div>

            <div class="flex">
                <div style="flex:5">
                    <div class="flex" style="justify-content: space-evenly;">
                        <div class="numbers">1</div>
                        <div class="numbers">2</div>
                        <div class="numbers">3</div>
                    </div>

                    <div class="flex" style="justify-content: space-evenly;padding: 20px 0;">
                        <div class="zero">0</div>
                        <div class="numbers xs">.</div>
                    </div>
                </div>

                <div class="result" style="flex: 1;">
                    =
                </div>
            </div>
        </div>
    </div>

    <script>
        let nowinput = document.querySelector('#nowin')
        let allinput = document.querySelector('#allin')
            //获取所有数字按钮
        let nums = document.querySelectorAll('.numbers')
            //获取所有符号
        let sym = document.querySelectorAll('.symbol')
        let result = document.querySelector('.result')
        let symbs = []
        let allnum = []

        //为数字添加点击事件
        for (let i = 0; i < nums.length; i++) {
            const num = nums[i];
            num.onclick = function() {
                nowinput.innerText += num.innerText
            }
        }
        document.querySelector('.clear').onclick = function() {
            symbs.length = 0
            allnum.length = 0
            allinput.innerText = ''
            nowinput.innerText = ''
        }

        document.querySelector('.zero').onclick = function() {
            nowinput.innerText += this.innerText
        }

        //为运算添加点击事件
        for (let i = 0; i < sym.length; i++) {
            const s = sym[i];
            s.onclick = function() {
                let num = Number(nowinput.innerText)
                let symb = s.innerText
                let str = nowinput.innerText + s.innerText
                allinput.innerText += str
                nowinput.innerText = ''
                allnum.push(num)
                symbs.push(symb)
            }
        }

        result.onclick = function() {
            let num = Number(nowinput.innerText)
            let symb = result.innerText
            let str = nowinput.innerText + result.innerText
            allinput.innerText += str
            nowinput.innerText = ''
            allnum.push(num)
            symbs.push(symb)
            let total
                //优先判断是否有乘除法 取余
            while (symbs.findIndex(r => r == 'x' || r == '/' || r == '%') >= 0) {
                let i = symbs.findIndex(r => r == 'x' || r == '/' || r == '%')
                let temp1
                let temp2
                    // debugger
                switch (symbs[i]) {
                    case 'x':
                        // 把运算完成的元素合并 符号也合并
                        allnum[i] = allnum[i] * allnum[i + 1]
                        temp1 = allnum.splice(i + 1)
                        temp1.shift()
                        temp1.forEach(t => {
                            allnum.push(t)
                        });
                        break;
                    case '/':
                        allnum[i] = allnum[i] / allnum[i + 1]
                        temp1 = allnum.splice(i + 1)
                        temp1.shift()
                        temp1.forEach(t => {
                            allnum.push(t)
                        });
                        break
                    case '%':
                        allnum[i] = allnum[i] % allnum[i + 1]
                        temp1 = allnum.splice(i + 1)
                        temp1.shift()
                        temp1.forEach(t => {
                            allnum.push(t)
                        });

                        break
                    default:
                        break;
                }
                temp2 = symbs.splice(i)
                temp2.shift()
                temp2.forEach(t => {
                    symbs.push(t)
                });
            }
            total = allnum[0]
            let temp3
                // 计算加减法
            for (let i = 0; i < symbs.length; i++) {
                const s = symbs[i];
                switch (s) {
                    case '+':
                        total += allnum[i + 1]
                        break;
                    case '-':
                        total = total - allnum[i + 1]
                        break
                    default:
                        break;
                }
            }
            nowinput.innerText = total
        }
    </script>
</body>

</html>